<html>

<head>
    <meta charset="utf-8" />
    <title>AJAXJS Web UI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../dist/css/base.css" />
    <link rel="stylesheet" type="text/css" href="../../dist/css/widget/modal/top-msg.css" />
    <link rel="stylesheet" type="text/css" href="../common/demo.css" />
    <script src="https://lib.baomitu.com/vue/2.6.11/vue.js"></script>
</head>

<body>
    <div class="box">
        <h1>Welcome to AJAXJS Web UI</h1>
        <div>
            <menu>
                <span></span>
            </menu>
            <div class="content">
                <h2>消息提示框</h2>
                <p>右上角顶部出现，不需要用户操作或者确认的，过一段时间会自己消失。该控件的效果是从页面右上方徐徐显示出一个消息框，然后暂时停留若干时间，完毕后自动收缩。多用于简洁明快的提示信息。</p>
                <button class="aj-btn" onclick="aj.msg.show('操作<b>成功</b>！');">Click to demo</button>
                <p>该方法无须使用标签，而是 JS 方法调用。</p>
                <pre class="prettyprint"><xmp>aj.msg.show('<b>操作</b>成功！');

aj.msg.show('操作成功！', { // 可选的配置参数
    afterClose(msg) {
        // 消失之后触发的事件
    },
    showTime: 5000 // 显示停留时间，单位是毫秒。默认是三秒
});</xmp></pre>
                <p>原理参见详细的<a href="https://blog.csdn.net/zhangxin09/article/details/79156982" target="_blank">我博客</a>。</p>
            </div>
            <div class="copyright">
                <div></div>
            </div>
        </div>
    </div>
    <script src="../common/demo.js"></script>
    <script src="../../dist/base/prototype.js"></script>
    <script src="../../dist/widget/msgbox-msg.js"></script>
</body>

</html>